<template>
  <ul class="bw-com-node-event-list">
    <template v-for="item in curNodeEventList" :key="item.eventCode">
      <li class="bw-com-node-event-item">
        <div class="handred" @click="item.isExpand = !item.isExpand">
          <span class="handred-title"> {{ item.eventName }} </span>

          <div class="handred-extra">
            <Icon
              class="bw-close-icon"
              :icon="
                item.isExpand
                  ? 'ant-design:down-outlined'
                  : 'ant-design:left-outlined'
              "
            />
          </div>
        </div>

        <div :class="['content', item.isExpand && 'content-expand']">
          <div class="content-item" @click="onOpenEventModal(item)">
            <a-textarea
              :readonly="true"
              :autosize="{ minRows: 2, maxRows: 8 }"
              placeholder="请配置事件回调"
              v-model:value="item.callbackFun"
            />
          </div>
        </div>
      </li>
    </template>

    <BwEventCallback
      :data="curEventInfo"
      v-model:visible="curVisible"
      @ok="onEventModalOk"
    />
  </ul>
</template>

<script lang="ts" setup>
import { useNodeEvent } from './util'
import BwEventCallback from './coms/index.vue'

const {
  curVisible,
  curEventInfo,
  curNodeEventList,

  onEventModalOk,
  onOpenEventModal,
} = useNodeEvent()
</script>

<style lang="less" scoped>
.bw-com-node-event-list {
  padding: 0 16px;
  width: calc(100% - 32px);
  height: calc(100% - 16px);

  .bw-com-node-event-item {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 8px;
    border: 1px solid #e8e8e8;

    .handred {
      height: 30px;
      padding: 0 8px;
      width: calc(100% - 16px);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;

      .handred-title {
        flex: 1;
      }
    }

    .content {
      height: 0;
      padding: 0 8px;
      overflow: hidden;
      width: calc(100% - 16px);
    }

    .content-expand {
      height: auto;
      padding: 8px;
      border-top: 1px solid #e8e8e8;

      .content-item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        justify-content: space-between;

        .label {
          width: 80px;
        }

        .input {
          flex: 1;
        }
      }

      .node-attr-value {
        align-items: flex-start;
        .label {
          line-height: 32px;
        }
      }
    }
  }
}
</style>
